import React, {useState} from 'react'
import {useProjectInUrl} from "../kanban/util";
import {useDeleteEpic, useEpics} from "../../utils/epic";
import {useEpicSearchParams, useEpicsQueryKey} from "./util";
import {Row, ScreenContainer} from "../../components/lib";
import {Button, List, Modal} from "antd";
import dayjs from "dayjs";
import {useTasks} from "../../utils/task";
import {Link} from "react-router-dom";
import {CreateEpic} from "./create-epic";
import {Epic} from "../../types/epic";

export const EpicScreen = () => {
    const {data: currentProject} = useProjectInUrl()
    const {data: epics} = useEpics(useEpicSearchParams())
    const {data: tasks} = useTasks({projectId: currentProject?.id})
    const {mutate: deleteEpic} = useDeleteEpic(useEpicsQueryKey())
    const [epicCreateOpen, setEpicCreateOpen] = useState(false)

    const confirmDeleteEpic = (epic: Epic) => {
        return Modal.confirm({
            okText: '确定',
            cancelText: '取消',
            title: '确定删除任务组吗？',
            onOk () {
                return deleteEpic({id: epic.id})
            }
        })
    }
    return <ScreenContainer>
        <Row between={true}>
            <h1>{currentProject?.name}任务组</h1>
            <Button onClick={() => {
                setEpicCreateOpen(true)
            }} type={'link'}>创建任务组</Button>
        </Row>
        <List style={{overflow: 'auto'}} dataSource={epics} itemLayout={'vertical'} renderItem={epic => <List.Item>
           <List.Item.Meta
            title={<Row between={true}>
                <span>{epic.name}</span>
                <Button onClick={() => confirmDeleteEpic(epic)} type={'link'}>删除</Button>
            </Row>}
            description={<div>
                <div>开始时间：{dayjs(epic.start).format('YYYY-MM-DD')}</div>
                <div>结束时间：{dayjs(epic.end).format('YYYY-MM-DD')}</div>
            </div>}
           />
            <div>
                {tasks?.filter(task => task.epicId === epic.id).map(task =>
                <Link to={`/projects/${currentProject?.id}/kanban?editingTaskId=${task.id}`}
                      key={task.id}>{task.name}</Link>)}
            </div>
        </List.Item>} />
        <CreateEpic onClose={() => setEpicCreateOpen(false)} visible={epicCreateOpen}/>
    </ScreenContainer>
}
